<template>
  <basic-dialog :visible="show"
                minWidth="600px"
                title="选择车间"
                :isFullScreen="false"
                isShowClose
                @close="show = false">
    <q-form class="q-gutter-md dialog-content margin-t-20">
      <q-card-section class="scrollbar scroll-y margin-b-20" style="max-height: 500px;padding-top: 0">
        <div class="factory">
          <div class="title">
            {{userInfo.company_name}}
          </div>
          <ul class="plant-list">
            <li class="plant-item" v-for="(plant, plantIndex) in treeList" :key="plantIndex"
                :class="{'active': select.plant.hash === plant.hash}"
                v-show="plant.label !== 'default'" @click="selectPlant(plant)">
              <div style="margin: 0 auto;width: fit-content">{{plant.label}}</div>
            </li>
          </ul>
        </div>
      </q-card-section>
    </q-form>
    <set-production-line ref="setProductionLine" @setLine = "setLine"/>
  </basic-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import setProductionLine from './set-production-line'
export default {
  props: {
    treeList: {
      type: Array
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  components: {
    setProductionLine
  },
  data () {
    return {
      show: false,
      submitting: false, // 提交状态
      select: {
        plant: {},
        line: {
          id: null
        }
      },
      thumbStyle: this.CommonConfig.thumbStyle // 滚动条样式
    }
  },
  methods: {
    // 显示弹框
    showDialog (selTree) {
      this.show = true
      console.log(this.treeList, 'treeList')
      this.initInfo(selTree)
    },
    // 初始化数据
    initInfo (selTree) {
      this.select.plant = selTree.plant
      this.select.line = selTree.line
    },
    // 选中车间
    selectPlant (plant) {
      if (plant.hash !== this.select.plant.hash) {
        this.select.plant = plant
        this.select.line = {
          id: null
        }
      }

      this.$refs.setProductionLine.showDialog(this.userInfo.company_name, plant, this.select.line)
    },
    // 提交
    setLine (line) {
      this.select.line = line
      this.$emit('submit', this.select)
      this.show = false
    }
  }
}
</script>

<style scoped lang='stylus'>
.factory{
  margin-top 10px
  &:first-child{
    margin-top 0
  }
}
.title{
  font-size 16px
  font-weight 500
  color #333
  margin-bottom 20px
}
.plant-list{
  display flex
  flex-wrap wrap
  margin-right -10px
  .plant-item{
    min-width 124px
    min-height 32px
    word-break break-all
    padding 6px 8px
    line-height 20px
    border:1px dashed #999
    border-radius:6px
    margin-right 10px
    margin-bottom 10px
    cursor pointer
    &.active{
      border-color #5f77fd
      color #5f77fd
    }
  }
}
</style>
